/**
 * Shopware 5
 * Copyright (c) shopware AG
 *
 * According to our dual licensing model, this program can be used either
 * under the terms of the GNU Affero General Public License, version 3,
 * or under a proprietary license.
 *
 * The texts of the GNU Affero General Public License with an additional
 * permission and of our proprietary license can be found at and
 * in the LICENSE file you have received along with this program.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * "Shopware" is a registered trademark of shopware AG.
 * The licensing of the program under the AGPLv3 does not imply a
 * trademark license. Therefore any rights, title and interest in
 * our trademarks remain entirely with us.
 *
 * @category   Shopware
 * @package    Shopware_Styling
 * @subpackage Mixins
 * @version    $Id$
 * @author shopware AG
 */

/**
 * Cross Browser mixin which allows to create
 * transitions between two states.
 *
 * @param [string] type - which property should be animated
 * @param [string] duration - duration of the animation
 * @param [string] easing - easing function for the animation
 * @param [string] delay - delay of the animation
 */
@mixin single-transition($type: all, $duration: 0.5s, $easing: linear) {
	-webkit-transition: $type $easing $duration;
	-moz-transition:$type $easing $duration;
	-ms-transition: $type $easing $duration;
	-o-transition: $type $easing $duration;
	transition: $type $easing $duration;
}

/**
 * Cross Browser mixin which provides the default focus behavior.
 */
@mixin form-item-focus($border-color: rgba(82, 168, 236, 0.8), $box-shadow-inset-color: rgba(0, 0, 0, 0.075), $box-shadow-outer-color: rgba(82, 168, 236, 0.6)) {
	 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
     -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
     -o-transition: border linear 0.2s, box-shadow linear 0.2s;
     transition: border linear 0.2s, box-shadow linear 0.2s;

     &:focus {
     	@include box-shadow(inset 0 1px 1px $box-shadow-inset-color, 0 0 8px $box-shadow-outer-color);
		border-color: $border-color;
	}
}

/**
 * Cross Browser mixin which allows to set the user
 * selection for a element.
 *
 * @param [string] select - selection model for the element
 */
@mixin user-select($select: none) {
	-webkit-user-select: $select;
	-moz-user-select: $select;
	-ms-user-select: $select;
	user-select: $select;
}

@mixin reset-border-radius {
	@include border-radius(0);
}

@mixin reset-box-shadow {
	-webkit-box-shadow: 0 0 0 0 transparent;
	-moz-box-shadow: 0 0 0 0 transparent;
	-ms-box-shadow: 0 0 0 0 transparent;
	-o-box-shadow: 0 0 0 0 transparent;
	box-shadow: 0 0 0 0 transparent;
}


// --- SVG Box Shadow --- //

/**
 * SVG Box Shadow Background
 *
 * Returns the svg url for a box-shadow background
 *
 * $offset-x        the x offset of the shadow (int)
 * $offset-y        the y offset of the shadow (int)
 * $blur            the range of the shadow (int)
 * $opacity         the opacity of the shadow in decimal percentage (0.5 = 50%)
 * $color           the color of the shadow (hex / rgba)
 */
@function svg-box-shadow-bg($offset-x, $offset-y, $blur, $opacity, $color) {
  @return url('data:image/svg+xml;charset=utf-8;base64,'
  + base64Encode('
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
      <defs>
          <filter id="dropshadow" width="200%" height="200%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="' + $blur + '"/>
              <feOffset dx="' + $offset-x + '" dy="' + $offset-y + '" result="offsetBlur"/>
              <feMerge>
                  <feMergeNode/>
                  <feMergeNode in="SourceGraphic"/>
              </feMerge>
          </filter>
      </defs>
      <rect width="90%" height="90%" x="5%" y="5%" rx="5" ry="5" fill="' + $color + '" filter="url(#dropshadow)" style="opacity:' + $opacity + ';" />
    </svg>'
  ));
}


// --- SVG Gradients --- //

/**
 * SVG Linear Gradient
 *
 * $from-x          horizontal start position of the gradient in percentage
 * $from-y          vertical start position of the gradient in percentage
 * $to-x            horizontal end position of the gradient in percentage
 * $to-y            vertical end position of the gradient in percentage
 *
 * $color-stops     expects a list of "svg-color-stop"
 *
 * Examples:
 * Vertical gradient from top to bottom: svg-linear-gradient(0%, 0%, 0%, 100%, ...)
 * Horizontal gradient from left to right: svg-linear-gradient(0%, 0%, 100%, 0%, ...)
 * Tilt vertical gradient from top-left to bottom-right: svg-linear-gradient(0%, 0%, 100%, 100%, ...)
 */
@function svg-linear-gradient($from-x, $from-y, $to-x, $to-y, $color-stops) {
  @return url('data:image/svg+xml;charset=utf-8;base64,'
    + base64Encode('
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
      <linearGradient id="gradient" x1="' + $from-x + '" y1="' + $from-y + '" x2="' + $to-x + '" y2="' + $to-y + '">' + $color-stops + '</linearGradient>
      <rect width="100%" height="100%" fill="url(#gradient)" />
    </svg>
    '));
}

/**
 * SVG Radial Gradient
 *
 * $center-x        the x position of the circle center
 * $center-y        the y position if the circle center
 * $radius          the radius of the circle
 * $inner-x         the x position of the innermost circle
 * $inner-y         the y position of the innermost circle
 *
 * Examples:
 * Radial gradient from the center to the outer: svg-radial-gradient(50%, 50%, 50%, 50%, 50%, ...)
 */
@function svg-radial-gradient($center-x, $center-y, $radius, $inner-x, $inner-y, $color-stops) {
  @return url('data:image/svg+xml;charset=utf-8;base64,'
    + base64Encode('
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
      <radialGradient id="gradient" cx="' + $center-x + '" cy="' + $center-y + '" r="' + $center-x + '" fx="' + $inner-x + '" fy="' + $inner-y + '">' + $color-stops + '</radialGradient>
      <rect width="100%" height="100%" fill="url(#gradient)" />
    </svg>
    '));
}

/**
 * SVG Color Stop Helper Function
 *
 * returns a svg color-stop for svg gradient mixins
 *
 * $color         the color of the stop
 * $offset        the position of the stop in percentage
 * $opacity       the opacity of the stop in decimal percentage (0.5 = 50%)
 */
@function svg-color-stop($color, $offset, $opacity) {
  @return '<stop offset="' + $offset + '" style="stop-color:' + $color + ';stop-opacity:' + $opacity + '" />';
}
